<template>
  <nav>
    <div>
      <router-link to="/" @mouseenter="hit(1)">商城主页</router-link>

      <router-link to="/shopcart" @mouseenter="hit(3.3)">购物车</router-link>
      <router-link to="/order" @mouseenter="hit(5.2)">订单</router-link>
    </div>
    <div>
      <template v-if="isLogin">
        <div>
          <button
            class="btn btn-danger"
            type="button"
            data-bs-toggle="offcanvas"
            data-bs-target="#offcanvasRight"
            aria-controls="offcanvasRight"
          >{{userName}}</button>

          <div
            class="offcanvas offcanvas-end"
            tabindex="-1"
            id="offcanvasRight"
            aria-labelledby="offcanvasRightLabel"
          >
            <div class="offcanvas-header" style="color:#fcca00">
              <h2 class="offcanvas-title" id="offcanvasRightLabel">ID:{{userName}}</h2>
              <button
                type="button"
                class="btn-close"
                data-bs-dismiss="offcanvas"
                aria-label="Close"
              ></button>
            </div>
            <div class="offcanvas-body" style="color:#ffffff; text-align: start;font-size:22px">
              <div class="recharge" v-if="rechargeShow">
                <div style="display:flex; justify-content: space-between;">
                  <span style="margin:10px 10px">充值中心</span>
                  <button type="button" class="btn btn-secondary" style="margin:10px" @click="closeRecharge">X</button>
                </div>
                <ul>
                  <li>
                    充值方式:
                    <select class="form-select" aria-label="Default select example">
                      <option value="1">银行卡</option>
                      <option value="2">微信充值</option>
                      <option value="3">支付宝</option>
                      <option value="4">其他方式</option>
                    </select>
                  </li>
                  <li>
                    充值金额(单位k):
                    <input
                      type="number"
                      class="form-control"
                      aria-label="First name"
                      style="width:40%"
                      v-model="chargSum"
                    />
                  </li>
                  <li>
                    充值密码：
                    <input
                      type="password"
                      class="form-control"
                      placeholder="密码"
                      aria-label="First name"
                      v-model="CPassword"
                      oninput="value=value.replace(/[^\d]/g,'')"
                    />
                  </li>
                  <li>
                  <button type="button" class="btn btn-danger" @click="recharge()">进行充值</button>
                  </li>
                </ul>
              </div>
              <ul>
                <li>
                  电话：
                  <input
                    type="tel"
                    class="form-control"
                    placeholder="我的电话"
                    aria-label="First name"
                    v-model="tel"
                    oninput="value=value.replace(/[^\d]/g,'')"
                  />
                </li>
                <li>
                  生日：
                  <input
                    type="date"
                    class="form-control"
                    placeholder="我的生日"
                    aria-label="First name"
                    v-model="lib"
                  />
                </li>
                <li>
                  钟爱品牌:
                  <select class="form-select" aria-label="Default select example">
                    <option selected>品牌：</option>
                    <option value="1">特斯拉</option>
                    <option value="2">法拉利</option>
                    <option value="3">劳斯莱斯</option>
                    <option value="4">其他品牌</option>
                  </select>
                </li>
                <li>
                  收货地址：
                  <input
                    type="text"
                    class="form-control"
                    placeholder="填写收货地址"
                    aria-label="First name"
                    v-model="local"
                  />
                </li>
                <li>
                  余额(单位k):
                  <input
                    type="text"
                    class="form-control"
                    aria-label="First name"
                    v-model=" this.$store.state.userInfo.balance"
                    disabled
                    style="width:40%"
                  />
                </li>
                <li style="margin-top:30px">
                  <button type="button" class="btn btn-dark" @click="charge()">充值</button>
                </li>
                <li style="margin-top:30px">
                  <button type="button" class="btn btn-success" @click="saveMessage()">保存信息</button>
                </li>
              </ul>
            </div>
          </div>
          <span @click="loginOut">
            <a href="#">注销</a>
          </span>
        </div>
      </template>
      <template v-else>
        <router-link to="/login">登入</router-link>|
        <router-link to="/register">注册</router-link>
      </template>
    </div>
  </nav>
  <div class="botline" :style="{left:offsetWith}"></div>

  <router-view />
</template>


<style lang="scss" scope>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
* {
  margin: 0;
  padding: 0;
}
nav {
  padding: 10px;
  width: 100%;
  height: 65px;
  margin: auto;
  background-color: #000000;
  color: rgb(255, 255, 255);
  font-size: 32px;
  display: flex;
  justify-content: space-between;
  .offcanvas-body {
    width: 90%;
    height: 600px;
    color: #000000;
    background-color: #2c3e50;
    border-radius: 0px 10px 0px 0px;
    input {
      border: #000000 1px solid;
      border-radius: 10px;
    }
  }
  a {
    margin: 30px;
    font-weight: bold;
    color: #ffffff;
    font-size: 26px;
    text-decoration: none;
    &.router-link-exact-active {
      color: #fcca00;
    }
  }
  a:hover {
    text-decoration: #fcca00 3px solid underline;
    color: #fcca00;
  }
}
.botline {
  width: 60px;
  height: 6px;
  border-radius: 5px;
  background-color: #fcca00;
  position: absolute;
  top: 55px;
  left: 65px;
  transition: all 1s;
}
.recharge {
  width: 22%;
  height: 560px;
  position: fixed;
  top: 100px;
  background-color: #000000;
  border-radius: 10px;
  ul {
    width: 90%;
    li {
      width: auto;
      height: 40px;
      margin: 60px 10px;
    }
  }
}
</style>
<script>
export default {
  data() {
    return {
      offsetWith: 65,
      tel: "",
      lib: "",
      brand: "",
      local: "",
      balance: 0,
      chargSum:0,
      CPassword:'',
      rechargeShow:false
    };
  },
  methods: {
    hit(index) {
      this.offsetWith = index * 65 + "px";
    },
    loginOut() {
      this.$store.commit("loginOut");
      // window.localStorage.removeItem("userInfo");
      this.$router.push({
        path: "/login"
      });
    },
    saveMessage() {
      this.$store.state.userInfo.tel = this.tel;
      this.$store.state.userInfo.lib = this.lib;
      this.$store.state.userInfo.brand = this.brand;
      this.$store.state.userInfo.local = this.local;
    },
    charge(){
      this.rechargeShow = true
    },
    closeRecharge(){
      this.rechargeShow = false
    },
    recharge(){
      if(this.CPassword !="123456" || this.chargSum <= 0 ){
        alert('充值失败！')
      }else{
      this.$store.state.userInfo.balance += this.chargSum 
      alert('充值成功！')
      this.chargSum = 0
      this.CPassword = ''
      this.rechargeShow = false
      }
    }
  },
  computed: {
    userName() {
      return this.$store.state.userInfo.username;
    },
    isLogin() {
      return this.$store.state.userInfo.isLogin;
    }
  }
};
</script>
